<style>
    .basicinfo {
        margin: 15px 0;
    }

    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }

    .basicinfo .row > div {
        margin: 5px 0;
    }
    .avatar-img{
        width: 50px;
    }
    .panel-statistics{
        color: #fff;
    }
    .avatar-img {
        width: 50px;
        /* border-radius: 50px; */
        /* line-height: 68px; */
        margin-top: 10px;
    }
    .avatar-div{
        width: 70px;
        height: 70px;
        background: #fff;
        border-radius: 50%;
    }
</style>
<div class="panel panel-default panel-intro">

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add " title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled " title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="true"
                           data-operate-del="true"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
